﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <form id="ReviewForm" action="/Account/Review" method="post">
    <div class="why">
        <div class="review_l">
            <div class="personalise">
                <h1>
                    Your Product
                </h1>
                <div class="product">
                    <dl>
                        <img src="../../Content/images/pound.gif" alt="" /></dl>
                    <%int radio = int.Parse(Request.Form["radio"].ToString());
                      int s;
                      if (radio == 1)
                      {
                          s = 10;
                      }
                      else if (radio == 2)
                      {
                          s = 50;
                      }
                      else
                          s = 90;
                    %>
                    <dl><%=s %>
                        </dl>
                    <%if (s == 90)
                      {%>
                    <dd>
                        1 x Cognidrive – 1 year subscription</dd>
                    <%} %>
                    <%else if (s == 50)
                        {%>
                    <dd>
                        1 x Cognidrive – 6 month subscription</dd>
                    <%}%>
                    <%else
                        { %>
                    <dd>
                        1 x Cognidrive – 1 month subscription</dd>
                    <%} %>
                    <input id="sval" name="sval" type="hidden" value="<%=s %>" />
                </div>
                <div class="product_text">
                    <a href="#" onclick="history.back(-1);">Choose another plan</a>
                    </div>
            </div>
            <div class="review_lf">
                <b class="review_lf_t"><b class="review_lf_tl"></b><b class="review_lf_tr"></b></b>
                <b class="review_lf_c">
                    <div class="product_box">
                        <h1>
                            Your registration details
                        </h1>
                        <ul>
                            <li class="product_box1">
                                <label>
                                    Given name :</label><span><input name="givenName" type="text" id="givenName" value="" /></span></li>
                            <li class="product_box1">
                                <label>
                                    Surname:</label><span><input name="surname" type="text" id="surname" value="" /></span></li>
                            <li class="product_box1">
                                <label>
                                    E-Mail address:</label><span><input name="email" type="text" id="email" value="" /></span></li>
                            <li class="product_box1">
                                <p>
                                    <font color="#7abc35">This will be your username:</font></p>
                            </li>
                            <li class="product_box1">
                                <label>
                                    Password:</label><span><input name="password" type="text" id="password" value="" /></span></li>
                            <li class="product_box1">
                                <label>
                                    Confirm password:
                                </label>
                                <span>
                                    <input name="confirmPassword" type="text" id="confirmPassword" value="" /></span></li>
                        </ul>
                    </div>
                    <div class="product_box">
                        <h1>
                            Your billing information</h1>
                        <ul>
                            <li class="product_box1">
                                <label>
                                    First name:</label><span><input name="firstName" type="text" id="firstName" value="" /></span></li>
                            <li class="product_box1">
                                <label>
                                    Last name:</label><span><input name="lastName" type="text" id="lastName" value="" /></span></li>
                            <li class="product_box1">
                                <label>
                                    Credit Card Number:</label><span><input name="creditCardNumber" type="text" id="creditCardNumber"
                                        value="" /></span></li>
                            <li class="product_box5">
                                <label>
                                    Payment type:</label>
                                <em>
                                    <span><input type="radio" name="radio" id="radio" value="1" checked /></span><img src="../../Content/images/a1.gif" alt="" /></em> <em>
                                        <span><input type="radio" name="radio" id="radio1" value="2"/></span><img src="../../Content/images/a2.gif" alt="" /></em> <em>
                                            <span><input type="radio" name="radio" id="radio2" value="3"/></span><img src="../../Content/images/a3.gif" alt="" /></em> <em><span><input type="radio" name="radio" id="radio3" value="4"/></span>
                                                <img src="../../Content/images/a4.gif" alt="" /></em></li>
                            <li class="product_box4">
                                <label>
                                    Expiration Date:</label><span><input name="month" id="month" type="text" value="mm"
                                        maxlength="2" /></span><dl>
                                            /</dl>
                                <span>
                                    <input name="year" id="year" type="text" value="yyyy" maxlength="4" /></span><dl>
                                        CVV:</dl>
                                <span>
                                    <input name="cvv" id="cvv" type="text" /></span><dl>
                                        <a href="#">What’s CVV?</a></dl>
                            </li>
                            <li class="product_box1">
                                <label>
                                    Billing Address Line1:</label><span><input name="adrLineFirst" type="text" id="adrLineFirst"
                                        value="" /></span></li>
                            <li class="product_box1">
                                <dl>
                                    <label>
                                        Billing Address line2:</label><br />
                                    Optional</dl>
                                <span>
                                    <input name="adrLineSecond" type="text" id="adrLineSecond" value="" /></span></li>
                            <li class="product_box3">
                                <label>
                                    City / Town:</label>
                                    <span><select name="city" id="city">
                                    <option value="">Select</option>
                                    <option>ShangHai</option>
                                    </select>
                                    </span></li>
                            <li class="product_box3">
                                <label>
                                    County / Province:</label>
                                    <span>
                                    <select name="county" id="county">
                                    <option value="">Select</option>
                                    <option>China</option>
                                    </select>
                                    </span></li>
                            <li class="product_box1">
                                <label>
                                    Post Code:</label><span><input name="postCode" type="text" id="postCode" value="" /></span></li>
                            <li class="product_box1">
                                <label>
                                    Home Telephone:</label><span><input name="homeTelephone" type="text" id="homeTelephone"
                                        value="" /></span></li>
                            <li class="product_boxa"><a>* All fields are mandatory</a></li>
                        </ul>
                    </div>
                    <div class="product_a">
                        <input name="checkbox" id="checkbox" type="checkbox" value="" />I agree to the <a>Terms
                            of Service</a></div>
                    <div class="product_button1">
                        <input name="" type="submit" value="" /></div>
                </b><b class="review_lf_d"><b class="review_lf_dl"></b><b class="review_lf_dr"></b>
                </b>
            </div>
        </div>
        <span class="review_r">
            <h1>
                Aleady have a Cognisess account?</h1>
            <b class="review_lf_t"><b class="review_lf_tl"></b><b class="review_lf_tr"></b></b>
            <b class="review_r_d">
                <div class="product_login">
                    <h1>
                        Please login</h1>
                    <ul>
                        <li>
                            <label>
                                Email:</label><span><input name="" type="text" /></span></li>
                        <li>
                            <label>
                                Password:</label><span><input name="" type="text" /></span></li>
                    </ul>
                    <div class="product_logina">
                        <label>
                            &nbsp;</label><input name="" type="button" /></div>
                </div>
                <div class="product_login_text">
                    <a href="#">Forgot Username or Password?</a></div>
            </b><b class="review_lf_d"><b class="review_lf_dl"></b><b class="review_lf_dr"></b>
            </b></span>
    </div>
    </form>
    <style type="text/css">
        .error
        {
            text-align: left;
            color: Red;
        }
    </style>

    <script type="text/javascript" language="javascript">
        $().ready(function() {
            $("#ReviewForm").validate({
                rules: {
                    givenName: { required: true, rangelength: [6, 12] },
                    surname: { required: true, rangelength: [6, 12] },
                    email: { required: true, email: true },
                    password: { required: true, rangelength: [6, 12] },
                    confirmPassword: { required: true, rangelength: [6, 12], equalTo: "#password" },
                    firstName: { required: true, rangelength: [6, 12] },
                    lastName: { required: true, rangelength: [6, 12] },
                    creditCardNumber: { required: true, creditcard: true },
                    month: { required: true, digits: true, max: 12 },
                    year: { required: true, digits: true, maxlength: 4, minlength: 3 },
                    cvv: { required: true, maxlength: 3, minlength: 3 },
                    adrLineFirst: { required: true },
                    adrLineSecond: { required: true },
                    postCode: { required: true },
                    homeTelephone: { required: true },
                    checkbox: { required: true },
                    county: { required: true, digits: true},
                    city: { required: true, digits: true}
                },
                messages: {
                    givenName: { required: "Please enter your GivenName.", rangelength: "givenName must be in 6-12 between characters." },
                    surname: { required: "Please enter your Surname.", rangelength: "Surname must be in 6-12 between characters." },
                    email: { required: "Please enter your E-mail address.", email: "Please enter a valid E-mail accounts." },
                    password: { required: "Please enter your Password.", rangelength: "PassWord length must be in 6-12 between characters." },
                    confirmPassword: { required: "Please enter your ConfirmPassWord.", rangelength: "confirmPassWord length must be in 6-12 between characters.", equalTo: "Two password input disagreed." },
                    firstName: { required: "Please enter your firstName", rangelength: "firstName must be in 6-12 between characters." },
                    lastName: { required: "Please enter your lastName", rangelength: "lastName must be in 6-12 between characters." },
                    creditCardNumber: { required: "Please enter your credit card number", creditcard: "Please input the correct credit card number" },
                    month: { required: "Please enter Months", digits: "Please fill in the right of the months", max: "Please fill in the right of the months" },
                    year: { required: "Please enter Year", digits: "Please fill in the right of the year", maxlength: "Please fill in the right of the year" },
                    cvv: { required: "Please enter CVV" },
                    adrLineFirst: { required: "Please enter your Billing Address Line1" },
                    adrLineSecond: { required: "Please enter your Billing Address Line2" },
                    postCode: { required: "Please enter Post Code" },
                    homeTelephone: { required: "Please Home Telephone" },
                    checkbox: { required: "Please agree to our terms!" },
                    county: { required: "Please select your county", digits: "Please select your county" },
                    city: { required: "Please select your city", digits: "Please select your city" }
                },
                remote: {
                    url: "Account/Review",
                    type: "post",
                    dataType: "json",
                    data: {
                        username: function() {
                            return $("#givenName").val();
                            return $("#Surname").val();
                            return $("#email").val();
                            return $("#password").val();
                            return $("#confirmPassword").val();
                            return $("#firstName").val();
                            return $("#lastName").val();
                            return $("#creditCardNumber").val();
                            return $("#month").val();
                            return $("#year").val();
                            return $("#cvv").val();
                            return $("#adrLineFirst").val();
                            return $("#adrLineSecond").val();
                            return $("#postCode").val();
                            return $("#homeTelephone").val();
                            return $("#checkbox").val();
                            return $("#city").val();
                            return $("#county").val();
                            return $("#sval").val();
                            return $("#radio").val();
                        }
                    }
                }
            });
        });
        $.validator.setDefaults({
            submitHandler: function(form) { form.submit(); }
        });    
    </script>

</asp:Content>
